<template>
	<view>
		<view class="top">
			<view class="title font-40 color-3">{{info.title}}</view>
			<view class="tag">陪同过户</view>
			<view class="money">
				<view class="">订单总额：</view>
				<view class=""><text class="">￥</text>
					<text class="font-bold">{{info.price}}</text>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box_title">是否需要开具增值税发票？</view>
			<u-radio-group v-model="need" placement="row" inactiveColor="#eee" size="14">
				<u-radio activeColor="#ff4b32" label="需要" :name="0" :customStyle="{marginRight: '60rpx'}"></u-radio>
				<u-radio activeColor="#ff4b32" label="不需要" :name="1"></u-radio>
			</u-radio-group>
		</view>

		<view class="box">
			<view class="box_title">选择电子发票类型</view>
			<u-radio-group v-model="species" placement="row" inactiveColor="#eee" size="14">
				<u-radio activeColor="#ff4b32" label="增值税普通发票" :name="2"
					:customStyle="{marginRight: '60rpx'}"></u-radio>
				<u-radio activeColor="#ff4b32" label="增值税专用发票" :name="3"></u-radio>
			</u-radio-group>
		</view>
		<view class="pay box">


			<view style="display: flex;align-items: center;">
				<image src="https://xd.xdzcy.top/adminuploads/354a6fecb8ff06a7fd339ae7530d30fb.png"
					style="width: 34rpx; height: 34rpx; margin-right: 20rpx">
				</image>
				<text class="font-28 color-9">余额支付</text>
			</view>
			<view class="mt-20 font-26 color-6">
				当前账户({{userInfo.nickname}})可用余额({{userInfo.money}}) <text class="ml-30" style="color:#ff4b32 ;"
					@click="goWallet">余额充值</text>
			</view>




		</view>
		<view class="fatiao box"> <u-icon name="info-circle" color="#FAB427" size="24rpx"
				style="margin-right: 20rpx;"></u-icon>
			购买该商品后，卖家无理由退款不退服务费</view>

		<view class="submit" @click="submit">
			确认付款
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		createOrder
	} from '@/config/api.js'
	export default {
		data() {
			return {
				info: {},
				need: 1,
				species: 2,
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(op) {
			this.info = JSON.parse(op.data)
		},
		methods: {
			goWallet() {
				uni.navigateTo({
					url: `/pages/my/wallet`
				})
			},
			async submit() {
				uni.showLoading({
					mask: true,
					title: '支付中..'
				})
				const res = await createOrder({
					id: this.info.id,
					need: this.need,
					species: this.species,
					paytype: 1
				})
				uni.hideLoading()
				if (res.code == 1) {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000,
						complete: () => {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/my/myOrders?type=' + 0
								})
							}, 2000)
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f8f9;
	}
</style>
<style lang="less">
	.top {
		padding: 30rpx;
		overflow: hidden;
		background: #fff;

		.title {
			line-height: 1.5em;
		}

		.tag {
			padding: 10rpx;
			margin: 20rpx 0;
			background-color: #f7f8f9;
			border-radius: 10rpx;
			width: fit-content;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 20rpx;
		}

		.money {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #ff2929;
			margin: 30rpx 0;
		}
	}

	.box {
		margin: 25rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;

		.box_title {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 40rpx;
		}
	}

	.pay {
		background: #ffffff;

	}

	.radioGroup {
		padding: 0 24rpx 0 30rpx;
	}

	.radiowx {
		width: 100%;
		display: block;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;
		font-size: 28rpx;
		color: #333333;
		height: 88rpx;
	}

	.radioTag {
		font-size: 24rpx;
		color: #333333;
		margin-left: 20rpx;
	}

	.fatiao {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		padding-left: 30rpx;
		background: #ffffff;

		font-size: 24rpx;
		font-weight: 300;
		color: #333333;
	}

	.submit {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100rpx;
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #ff2929;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>